<template>
  <div class="wrapper">
<div class="wdId">
  <span class="wd">我的银行卡</span>
</div>
    <div class="wrapper">
      <div class="wrapper">
        <div class="wrapper">
          <div class="yhk">
            <span class="zg">中国建银行</span>
          </div>
          <div class="yhk">
            <span class="ka">储蓄卡</span>
          </div>
          <div class="yhk">
            <span class="hm">**** **** **** 8888</span>
          </div>
          <div class="imgWrapper">
            <img class="kaImg" src="../../../../src/assets/static/cardList/1.svg">
          </div>
        </div>
        <div class="wrapper">
          <div class="yhk">
            <span class="zg">中国建设银行</span>
          </div>
          <div class="yhk">
            <span class="ka">借贷卡</span>
          </div>
          <div class="yhk">
            <span class="hm">**** **** **** 8888</span>
          </div>
          <div class="imgWrapper">
            <img class="kaImg" src="../../../../src/assets/static/cardList/1.svg">
          </div>
        </div>
        <div class="wrapper">
          <div class="yhk">
            <span class="zg">中国工商银行</span>
          </div>
          <div>
            <span class="ka">储蓄卡</span>
          </div>
          <div class="yhk">
            <span class="hm">**** **** ****</span>
          </div>
          <div class="imgWrapper">
            <img class="kaImg" src="../../../../src/assets/static/cardList/3.svg">
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="imgWrapper">
          <img class="jh" src="../../../../src/assets/static/cardList/2.svg">
        </div>
      </div>
      <div class="bd">
        <span class="bdka">绑定其他银行卡</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Middle',
  components: {
  },
  data() {
    return {
      artical: [
        {}
      ],
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wdId{
  display: flex;
  align-items: center;
  justify-content: center;
}
.yhk{
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.wd{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.zg{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.ka{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.hm{
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.bdka{
  width: 201px;
  height: 27px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
/*-------------- img图片 -----------------*/
.kaImg{
  width: 750px;
  height: 1624px;
}
.jh{
  width: 750px;
  height: 1624px;
}
</style>
